<template>
    <div class="form_modal">
        <el-dialog
            :visible.sync="modal1"
            :close-on-click-modal="false"
            center
            :before-close="handleClose">
        <div class="modal_title">
            <span>{{title_name}}</span>
        </div>
            <el-form :model="formData" :rules="rules" ref="formData" label-width="120px">
                <el-row :gutter="24">
                    <el-col :span="11">
                        <el-form-item label="卡号" prop="cardNum">
                            <el-input v-model="formData.cardNum" placeholder="请输入卡号" :disabled="title_name === '编辑卡号'"></el-input>
                        </el-form-item>
                        <el-form-item label="开始时间" prop="startTime">
                            <el-date-picker
                                v-model="formData.startTime"
                                type='date'
                                format="yyyy-MM-dd"
                                @change="getStartTime"
                                :disabled="title_name === '编辑卡号'"
                                placeholder="选择开始日期" style="width:100%">
                                </el-date-picker>
                        </el-form-item>
                        <el-form-item label="到期时间" prop="endTime">
                            <el-date-picker
                                v-model="formData.endTime"
                                type='date'
                                format="yyyy-MM-dd"
                                @change="getEndTime"
                                placeholder="选择到期日期" style="width:100%">
                                </el-date-picker>
                        </el-form-item>

                    </el-col>
                    <el-col :span="11">
                        <el-form-item label="卡号状态" prop="status">
                            <el-select v-model="formData.status" placeholder="请选择卡号状态" @change="changeStatus" style="width:100%">
                                <el-option v-for="(item, index) in csStatusArry" :value="item.status" :label="item.statusinfo" :key="index">
                                    {{item.statusinfo}}
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="imei" prop="imei">
                            <el-input v-model="formData.imei" :maxlength="15" placeholder="请输入imei"></el-input>
                        </el-form-item>
                        <el-form-item label="备注信息" prop="remark">
                            <el-input type="textarea" v-model="formData.remark"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>

            <!-- 保存--取消按钮 -->
            <el-row :gutter="24" type="flex" justify="end">
                <el-col :span="3">
                    <el-button type="primary" @click="submitForm('formData')">确 定</el-button>
                </el-col>
                <el-col :span="3">
                    <el-button @click="handleClose('formData')">取 消</el-button>
                </el-col>
            </el-row>
        </el-dialog>
    </div>
</template>

<script>
import { cardInfoSave, cardInfoEdmit} from '@/api/cardApi'
import { startRecTime1} from '@/utils/times'
export default {
    props:['historyData', 'title'],
    data(){
        // 开启日期验证
        const validatesstartTime = (rule, value, callback) => {
            if (value === '') {
                return callback(new Error('请选择开启日期！'))
            } else {
                return callback()
            }
        }

        // 到期日期验证
        const validatesendTime = (rule, value, callback) => {
            if (value === '') {
                return callback(new Error('请选择到期日期！'))
            } else {
                return callback()
            }
        }
        return {
            title_name: '',
            modal1: false,
            //用户状态
            csStatusArry:[
                {
                    status: 1,
                    statusinfo: '正常'
                },
                {
                    status: 9,
                    statusinfo: '到期'
                }
            ],
            formData: {
                cardNum: '',
                startTime: '',
                endTime: '',
                imei: '',
                status: '',
                statusInfo: '',
                remark: '' //备注
            },
            rules: {
                cardNum: [
                    { required: true, message: '卡号不能为空!', trigger: 'blur' },
                    { type: 'string', max: 36, message: '不能超过36个字符', trigger: 'blur' }
                ],
                startTime:[
                    { required: true, message: '请选择开启日期!', trigger: 'blur'},
                    { validator: validatesstartTime, trigger: 'blur' }
                ],
                endTime:[
                    { required: true, message: '请选择到期日期!', trigger: 'blur'},
                    { validator: validatesendTime, trigger: 'blur' }
                ],
                status: [
                    { required: true, type: 'number', trigger: 'blur' }
                ]
            },
        }
    },
    methods:{
        //改变卡号状态
        changeStatus(status){
            // console.log("卡号状态:", status);
            if (status){
                this.formData.status = status;
            }
        },

        //改变开启日期
        getStartTime(date){
            // console.log("date:", date, startRecTime1(date));
            this.formData.startTime = startRecTime1(date);
        },

        // 改变到期日期
        getEndTime(date1){
            this.formData.endTime = startRecTime1(date1);
        },

        //保存卡号信息
        addForm() {
            this.$refs['formData'].validate((valid) => {
                if (valid) {
                    // 查出客服状态 statusInfo 
                    // this.csStatusArry.map(n=>{
                    //     if (this.formData.status == n.status){
                    //         this.formData.statusInfo = n.statusinfo
                    //     }
                    // })

                    // 回调接口
                    cardInfoSave(this.formData).then((res)=>{
                    //    console.log("save:", res.data); 
                        if ( res.statusCode == "200"){
                            this.$message({message: '保存成功！！！',type: 'success'});
                            this.$emit('submit', this.formData);// 子传给父， 查询所有
                            this.modal1 = false;

                            //清空上次记录
                            this.formData = {
                                cardNum: '',
                                startTime: '',
                                endTime: '',
                                imei: '',
                                status: '',
                                statusInfo: '',
                                remark: '' //备注
                            };
                        }
                    })
                } else {
                    this.$message({showClose: true, message: 'error submit!!', type: 'error'});
                    return false;
                }
            });
        },

        //修改卡号信息
        edmitForm(){
            this.$refs['formData'].validate((valid) => {
                if (valid) {
                    // 查出客服状态 statusInfo 
                    // this.csStatusArry.map(n=>{
                    //     if (this.formData.status == n.status){
                    //         this.formData.statusInfo = n.statusinfo
                    //     }
                    // })

                    // 回调接口
                    cardInfoEdmit(this.formData).then((res)=>{
                    //    console.log("save:", res.data); 
                        if ( res.statusCode == "200"){
                            this.$message({message: '修改成功！！！', type: 'success'});
                            this.$emit('submit', this.formData);// 子传给父， 查询所有
                            this.modal1 = false;
                        }
                    })
                } else {
                    this.$message({showClose: true, message: 'error submit!!', type: 'error'});
                    return false;
                }
            });
        },

        // 卡号(新增/编辑) 保存按钮
        submitForm() {
            if (this.title_name === '新增卡号') {
                this.addForm(); //回调 新增接口
            } else if (this.title_name === '编辑卡号') {
                this.edmitForm(); //回调 编辑接口
            }
        },

        // 弹层取消、关闭
        handleClose(){
            this.$refs['formData'].resetFields();
            this.modal1 = false;
        },

        // 判断tilte 是哪个model框
        get_title() {
            if (this.title === '新增卡号') {
                this.formData = {
                    cardNum: '',
                    startTime: '',
                    endTime: '',
                    imei: '',
                    status: '',
                    statusInfo: '',
                    remark: '' //备注
                }
            } else {
                this.formData = this.historyData;
            }
        },

        //全局方法封装
        addEdmitFun(){

        }
    },
    watch:{
        historyData: function (val) {
            this.formData = val;
            console.log("watch:", val);
            this.get_title()
        },
        title: function (title) {
            // console.log("tittle:", title);
            this.title_name = title;
            this.get_title() // 判断tilte 是哪个model框
        }
    }
}
</script>

<style scoped>
  /* @import url('../../assets/css/dialog.css'); */
</style>